<template>
  <div class="rules-group-container tree box" v-if="object">
    <el-card class="box-card" style="margin-top: 10px">
      <el-main style="padding: 10px">
        <el-row>
          <el-row class="child">
            <el-tag class="ml-2" type="info" v-if="object.name">{{object.name}}</el-tag> <el-icon @click="addRule(object.list)"><Plus /></el-icon><el-icon v-if="parent" @click="parent.list.splice(index, 1)"><Minus /></el-icon>
            <el-drawer title="配置值规则"  v-model="ruleOpen" size="35%" :show-close="false">
              <el-form :model="ruleform">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="规则名称"  >
                      <el-input v-model="ruleform.name" placeholder="规则名称"/>
                    </el-form-item>
                   </el-col>
                  <el-col :span="12">
                    <el-form-item label="数据列" >
                      <el-input v-model="ruleform.column" placeholder="请输入数据列"/>
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                      <el-form-item label="规则类型" >
                        <el-select v-model="ruleform.type" placeholder="请选择规则类型">
                          <el-option label="条件组" value="group" ></el-option>
                          <el-option label="条件项" value="condition" ></el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="ruleform.type=='group'">
                    <el-form-item label="逻辑操作" >
                      <el-select v-model="ruleform.op" placeholder="请选择规则类型">
                        <el-option label="or" value="or" ></el-option>
                        <el-option label="and" value="and" ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="数据规则" >
                      <el-select v-model="ruleform.symbol" placeholder="请选择规则类型">
                        <el-option label="等于" value="=="></el-option>
                        <el-option label="大于" value=">"></el-option>
                        <el-option label="小于" value="<"></el-option>
                        <el-option label="不等于" value="!="></el-option>
                        <el-option label="包含" value="包含"></el-option>
                        <el-option label="不包含" value="不包含"></el-option>
                        <el-option label="以...开头" value="以...开头"></el-option>
                        <el-option label="不以...开头" value="不以...开头"></el-option>
                      </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="数据值" >
                        <el-input v-model="ruleform.data" placeholder="数据值"/>
                      </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item >
                    <el-button @click="saverule(object.list)" type="primary">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-drawer>
          </el-row>

          <template v-for="(item, index) in object.list">
            <el-row :key="'condition' + index" class="child" v-if="item.type == 'condition'">
              <el-tag  class="ml-2" type="success">{{item.name}}</el-tag>
              <el-icon @click="object.list.splice(index, 1)"><Minus /></el-icon>
            </el-row>
            <el-row v-if="item&&item.type == 'group' && item.list.length >= 0" :key="'group' + index" class="child" >
              <create-rule :object="item" :parent="object" :index="index"></create-rule>
            </el-row>
          </template>
        </el-row>
      </el-main>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="CreateRule">
import {
  defineProps,
  defineEmits,
  defineExpose,
  ref,
  inject,
  reactive,
  onMounted,
  getCurrentInstance,
  watch,
  computed, toRaw
} from 'vue'
const props = defineProps({
  object: {
    type: Object,
    default: {
      rules: 'and',
      name: 'test',
      list: []
    }
  },
  index:{
    type: Number,
    default: 0
  },
  parent:{
    type: Object,
    default: null
  }

})
debugger
const addRule = (list:any) => {
  ruleOpen.value=true
}
const ruleOpen=ref(false)
const ruleform=ref({})
const saverule = (data) => {
   if(ruleform.value["type"]=='group'){
     data.push({name:ruleform.value['name'], rules: ruleform.value['op'], type: 'group', list: [] })
   }else{
     data.push({ name:ruleform.value['name'],types: '', site: '', symbol: '', rules: '', type: 'condition' })
   }
   ruleOpen.value=false
}

</script>
<style scoped>
.box {
  width: 100%;
}

/* 只需要左边边框线 */
.child {
  width: 100%;
  position: relative;
  border: 1px solid #d9d9d9;
  border-style: none none none solid;
  padding: 10px 0;
  padding-left: 12px;
}

/* 设置一个伪元素宽2px 高50% 用于遮挡多余的左边框线 */
.child::before {
  display: block;
  content: '';
  position: absolute;
  background-color: white;
  width: 1px;
  height: 50%;
}

/* 设置第一个子元素的伪类定位 */
.box .child:first-child::before {
  left: -1px;
  top: 0;
}

/* 设置第二个子元素的伪类定位 */
.box .child:last-child::before {
  left: -1px;
  bottom: 0;
}

/* 设置子元素的横线，定位在高度的50% */
.box .child::after {
  top: 50%;
  left: 0;
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  border: 1px solid #d9d9d9;
  border-style: solid none none none;
}
</style>